<#assign contextPath=springMacroRequestContext.getContextPath() />
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>白泽艺考后台管理系统</title>
	<link rel="stylesheet" href="${contextPath}/resources/css/login/normalize.css">
	<link rel="stylesheet" href="${contextPath}/resources/css/login/login.css">
	<link rel="stylesheet" href="${contextPath}/resources/css/login/sign-up-login.css">
	<link rel="stylesheet" type="text/css" href="${contextPath}/resources/css/login/font-awesome.4.6.0.css">
	<link rel="stylesheet" href="${contextPath}/resources/css/login/inputEffect.css" />
	<link rel="stylesheet" href="${contextPath}/resources/css/login/verifyCode.css" />
	<link rel="stylesheet" href="${contextPath}/resources/css/login/tooltips.css" />
	<link rel="stylesheet" href="${contextPath}/resources/css/login/spop.min.css" />
	<script src="${contextPath}/resources/js/login/jquery.min.js"></script>

	<script src="${contextPath}/resources/js/login/snow.js"></script>
	<script src="${contextPath}/resources/js/login/jquery.pure.tooltips.js"></script>
	<script src="${contextPath}/resources/js/login/spop.min.js"></script>
	<script type="text/javascript" src="${contextPath}/resources/js/pidcrypt.js"></script>
	<script type="text/javascript" src="${contextPath}/resources/js/sha256.js"></script>
	<script type="text/javascript" src="${contextPath}/resources/js/md5.js"></script>
	<script type="text/javascript" src="${contextPath}/resources/js/login.js"></script>
	<script>
		(function () {
			// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
			if (!String.prototype.trim) {
				(function () {
					// Make sure we trim BOM and NBSP
					var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
					String.prototype.trim = function () {
						return this.replace(rtrim, '');
					};
				})();
			}

			[].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
				// in case the input is already filled..
				if (inputEl.value.trim() !== '') {
					classie.add(inputEl.parentNode, 'input--filled');
				}

				// events:
				inputEl.addEventListener('focus', onInputFocus);
				inputEl.addEventListener('blur', onInputBlur);
			});

			function onInputFocus(ev) {
				classie.add(ev.target.parentNode, 'input--filled');
			}

			function onInputBlur(ev) {
				if (ev.target.value.trim() === '') {
					classie.remove(ev.target.parentNode, 'input--filled');
				}
			}
		})();

		$(function () {
			$('#login #login-password').focus(function () {
				$('.login-owl').addClass('password');
			}).blur(function () {
				$('.login-owl').removeClass('password');
			});
			$('#login #register-password').focus(function () {
				$('.register-owl').addClass('password');
			}).blur(function () {
				$('.register-owl').removeClass('password');
			});
			$('#login #register-repassword').focus(function () {
				$('.register-owl').addClass('password');
			}).blur(function () {
				$('.register-owl').removeClass('password');
			});
			$('#login #forget-password').focus(function () {
				$('.forget-owl').addClass('password');
			}).blur(function () {
				$('.forget-owl').removeClass('password');
			});
			$("#zsubmit").on("click", function () {
                if (document.getElementById("read").checked) {
                    checkLoginInfo()
                } else {
                    alert("请先阅读并勾选同意使用条款");
                }
			});
		});
	</script>
	<style type="text/css">
		html {
			width: 100%;
			height: 100%;
		}

		body {

			background-repeat: no-repeat;

			background-position: center center #2D0F0F;

			background-color: #00BDDC;

			background-image: url(${contextPath}/resources/images/snow.jpg);

			background-size: 100% 100%;

		}

		.snow-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			z-index: 100001;
		}

		#login .loginform .pad,
		#register .loginform .pad {
			overflow: hidden;
			padding: 30px;
			padding-bottom: 0px !important;
		}

		#checkagree {
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: none;
		}

		.agree {
			height: 20px;
			line-height: 20px;
			flex: 1;
		}

		.agree span {
			color: #3babe7;
			width: 16px;
			height: 16px;
			display: inline-block;
			border-radius: 8px;
			line-height: 16px;
			cursor: pointer;
			position: relative;
			top: 2px;
			margin-left: 2px;
			left: 15px;
			background: #fcaa00;
		}

		.agree input:checked+span::after {
			display: block;
			width: 16px;
			height: 16px;
			content: "\2714";
			text-align: center;
			position: absolute;
			font-size: 14px;
			line-height: 16px;
			color: #fff;
		}
	</style>
</head>

<body>

	<div class="snow-container"></div>

	<div id="login">
		<input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
		<input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
		<input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
		<div class="wrapper">

			<div class="login sign-in-htm">
				<form name="myform" id="merchantLoginForm" class="container offset1 loginform" action="${contextPath}/login/check"
				 method="post">

					<div id="owl-login" class="login-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<div>
							<h3>白泽艺考后台管理系统</h3>
						</div>
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="loginName" type="text" id="login-username" autocomplete="off"
								 placeholder="请输入用户名" tabindex="1" maxlength="15" />
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="password" type="password" id="login-password" placeholder="请输入密码"
								 tabindex="2" maxlength="15" /><span id="pwdMsg"></span>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo input--verify_code">
								<input class="input__field input__field--hideo" type="text" id="login-verify-code" name="validcode"
								 autocomplete="off" placeholder="请输入验证码" tabindex="3" maxlength="4" />
								<label class="input__label input__label--hideo" for="login-verify-code">
									<i class="fa fa-fw fa-bell-o icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<img id="validCodImg" class="verify-code-canvas" src="${contextPath}/login/valid-code-image.jpg" onclick="$(this).attr('src', '${contextPath}/login/valid-code-image.jpg?'+new Date());">
							<span id="checkagree" class="input input--hideo">
								<label class="agree" for="read">
									已阅读并同意 <a target="view_window" href="${contextPath}/login/clause">使用条款</a>
									<input checked style="display:none" type="checkbox" id="read" name="xieyi">
									<span>
									</span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">
	
						<span style="color:#f00;font:14px/50px 微软雅黑;" id="pwdMsg"></span>
						<span style="color:#f00;font:14px/50px 微软雅黑;" id="userMsg">${msg}</span>
						<input id="zsubmit" class="btn btn-primary" type="button" tabindex="3" value="登录" style="color:white;" />
					</div>
				</form>
			</div>

			<div class="login sign-out-htm">
				<form action="#" method="post" class="container offset1 loginform">

					<div id="owl-login" class="forget-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="forget-username" autocomplete="off" placeholder="请输入用户名" />
								<label class="input__label input__label--hideo" for="forget-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="forget-code" autocomplete="off" placeholder="请输入注册码" />
								<label class="input__label input__label--hideo" for="forget-code">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="forget-password" placeholder="请重置密码" />
								<label class="input__label input__label--hideo" for="forget-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">

					</div>
				</form>
			</div>

			<div class="login sign-up-htm">
				<form action="#" method="post" class="container offset1 loginform">

					<div id="owl-login" class="register-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="register-username" autocomplete="off"
								 placeholder="请输入用户名" maxlength="15" />
								<label class="input__label input__label--hideo" for="register-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="register-password" placeholder="请输入密码"
								 maxlength="15" />
								<label class="input__label input__label--hideo" for="register-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="register-repassword" placeholder="请确认密码"
								 maxlength="15" />
								<label class="input__label input__label--hideo" for="register-repassword">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<label class="input__label input__label--hideo" for="register-code">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">

					</div>
				</form>
			</div>
		</div>
	</div>
</body>

</html>